<template>
  <div class="company">
    <h3>优质单位</h3>
    <div class="company-box">
      <div class="company-list">
        <div class="company-item rippleMagic" v-for="v in list" :key="'company_'+v.id" @click="jumpTo(v)">
          <div class="logo">
            <img :src="v.logo" alt="logo">
          </div>
          <div class="wrap">
            <p class="title ellipsis" :title="v.name">{{ v.cname }}</p>
            <p class="job ellipsis">在招职位 {{ v.in_job }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  name: 'company',
  data () {
    return {
    }
  },
  methods: {

    jumpTo(obj) {
      if(!obj.id){
        this.$alertWarn('未获取到ID，请刷新后再试！');
        return
      }
      let timers = setTimeout(() => {
        this.$router.push({
          path: 'company',
          query: {
            id: obj.id
          }
        })
        clearTimeout(timers);
        timers = null;
      }, 300);
    }
  }
}
</script>

<style lang="stylus" scoped>
.company
  padding 10px 20px 0 20px
  h3
    font-size 20px
    height 70px
    line-height 70px

  .company-box
    overflow-x scroll
    .company-list
      display flex
      flex-direction column
      flex-wrap wrap
      height 162px

      .company-item
        padding 10px 5px 10px 10px
        height 76px
        width 155px
        display flex
        border-radius 6px
        overflow hidden
        margin-right 10px
        position relative
        background #f9f9f9

        &:nth-child(odd)
          margin-bottom 10px

        .logo
          flex 0 0 50px
          height 50px
          width 50px
          font-size 0
          border-radius 2px
          background #fff
          overflow hidden

          img
            height 100%

        .wrap
          margin-left 5px
          height 50px
          flex 1
          overflow hidden
          .title
            height 30px
            line-height 30px
            font-size 16px
            color #333
          .job
            height 20px
            line-height 20px
            font-size 12px
            color #999


</style>
